<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>照片墙</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            div{
                width:1200px;
                margin:50px auto;
                position:relative;
                background:red;
            }
            img{
                padding:10px;
                border:1px solid #ccc;
                background:#fff;
                position:absolute;
            }

            div img:first-of-type{
                width:400px;
                left:300px;
                top:260px;
                transform:rotate(-15deg);
            }
            div img:nth-of-type(2){
                width:300px;
                left:690px;
                top:200px;
                transform:rotate(-20deg);

            }
            div img:nth-of-type(3){
                width:300px;
                left:610px;
                top:100px;
                transform:rotate(20deg);

            }
            div img:nth-of-type(4){
                width:240px;
                left:380px;
                top:50px;
                transform:rotate(-18deg);

            }
            div img:nth-of-type(5){
                width:300px;
                left:860px;
                top:300px;
                transform:rotate(25deg);

            }
            div img:nth-of-type(6){
                width:300px;
                left:40px;
                top:60px;
                transform:rotate(-25deg);

            }
            div img:nth-of-type(7){
                width:300px;
                left:40px;
                top:280px;
                transform:rotate(18deg);

            }
            div img:nth-of-type(8){
                width:260px;
                left:260px;
                top:100px;
                transform:rotate(23deg);

            }
            div img:nth-of-type(9){
                width:400px;
                left:550px;
                top:430px;
                transform:rotate(25deg);

            }
            div img:nth-of-type(10){
                width:270px;
                left:310px;
                top:220px;
                transform:rotate(-6deg);
            }
            div img:hover{
                z-index:1;
                transform:rotate(0deg) scale(1.5,1.5);

            }
        </style>
    </head>
    <body>
        <div>
            <img src="images/1.jpg"/>
            <img src="images/2.jpg"/>
            <img src="images/3.jpg"/>
            <img src="images/4.jpg"/>
            <img src="images/5.jpg"/>
            <img src="images/7.jpg"/>
            <img src="images/6.jpg"/>
            <img src="images/8.jpg"/>
            <img src="images/9.jpg"/>
            <img src="images/10.jpg"/>
        </div>
    </body>
</html>